<template>
    <div class="register-container">
        <!-- 注册内容 -->
        <div class="register">
            <h3>
                注册新用户
                <span class="go"
                >我有账号，去 <a href="login.html" target="_blank">登陆</a>
        </span>
            </h3>
            <div class="content">
                <label>手机号:</label>
                <input
                        type="text"
                        placeholder="请输入你的手机号"
                        v-model="phone"
                        name="phone"
                        v-validate="{ required: true, regex: /^1[0-9]{10}$/ }"
                        :class="{ error: errors.has('phone') }"
                />
                <span class="error-msg">{{ errors.first("phone") }}</span>
            </div>
            <div class="content">
                <label>验证码:</label>
                <input
                        type="text"
                        placeholder="请输入验证码"
                        v-model="verifyCode"
                        name="code"
                        v-validate="{ regex: /^\d{6}$/ }"
                        :class="{ error: errors.has('code') }"
                />
                <button @click="getVerifyCode()" :disabled="isVerify">
                    获取验证码 <span v-show="isVerify">{{ time }}s</span>
                </button>
                <span class="error-msg">{{ errors.first("code") }}</span>
            </div>
            <div class="content">
                <label>登录密码:</label>
                <input
                        type="text"
                        placeholder="请输入你的登录密码"
                        v-model="password"
                        name="password"
                        v-validate="{ regex: /^\d{3,6}$/ }"
                        :class="{ error: errors.has('password') }"
                />
                <span class="error-msg">{{ errors.first("password") }}</span>
            </div>
            <div class="content">
                <label>确认密码:</label>
                <input
                        type="text"
                        placeholder="请输入确认密码"
                        v-model="passwordAgain"
                        name="passAgain"
                        v-validate="{ is: password, required: true }"
                        :class="{ error: errors.has('passAgain') }"
                />
                <span class="error-msg">{{ errors.first("passAgain") }}</span>
            </div>
            <div class="controls">
                <input
                        type="checkbox"
                        v-model="isAgree"
                        name="agree"
                        v-validate="{ agree: '' }"
                />
                <span>同意协议并注册《尚品汇用户协议》</span>
                <span class="error-msg">{{ errors.first("agree") }}</span>
            </div>
            <div class="btn">
                <button @click="register">完成注册</button>
            </div>
        </div>

        <!-- 底部 -->
        <div class="copyright">
            <ul>
                <li>关于我们</li>
                <li>联系我们</li>
                <li>联系客服</li>
                <li>商家入驻</li>
                <li>营销中心</li>
                <li>手机尚品汇</li>
                <li>销售联盟</li>
                <li>尚品汇社区</li>
            </ul>
            <div class="address">地址：北京市昌平区宏福科技园综合楼6层</div>
            <div class="beian">京ICP备19006430号</div>
        </div>
    </div>
</template>

<script>
    import {reqVerifyCode, reqRegister} from "@/api";
    import {Message} from 'element-ui'
    export default {
        name: "Register",
        data() {
            return {
                phone: "",
                verifyCode: "",
                isVerify: false,
                time: 5,
                password: "",
                passwordAgain: "",
                isAgree: false,
            };
        },
        methods: {
            //  获取验证码
            async getVerifyCode() {
                try {
                    const phoneReg =
                        /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
                    if (!phoneReg.test(this.phone)) {
                        // return alert("手机号格式错误");
                        return Message.error('手机号格式错误')
                    }
                    this.isVerify = true;
                    let res = await reqVerifyCode(this.phone);
                    this.verifyCode = res;
                    // 定时器
                    const timer = setInterval(() => {
                        this.time--;
                        if (this.time <= 0) {
                            this.time = 5;
                            clearInterval(timer);
                            this.isVerify = false;
                        }
                    }, 1000);
                } catch (err) {
                    // alert(err.message);
                    Message.error(err.message)
                    this.isVerify = false;
                }
            },
            // 注册
            async register() {
                //在点击注册的时候 首先要整体校验,validateAll方法返回promise,值是布尔值,成功则为true 失败则为false
                const validateResult = await this.$validator.validateAll(); //让所有的单独校验的表单进行校验
                if (!validateResult) return Message.error("请检查你的格式");

                const {phone, verifyCode, password, passwordAgain, isAgree} = this;
                if (
                    !(
                        phone &&
                        verifyCode &&
                        password &&
                        passwordAgain === password &&
                        isAgree
                    )
                ) {
                    // return alert("格式不对");
                    return Message.error('格式不对')
                }

                try {
                    await reqRegister({phone, password, code: verifyCode});
                    // alert("注册成功");
                    Message.success('注册成功')
                    this.$router.push("/login");
                } catch (err) {
                    // alert(err.message);
                    Message.error(err.message)
                }
            },
        },
    };
</script>

<style lang="less" scoped>
    .error {
        border: 1px solid red !important;
    }

    .register-container {
        .register {
            width: 1200px;
            height: 445px;
            border: 1px solid rgb(223, 223, 223);
            margin: 0 auto;

            h3 {
                background: #ececec;
                margin: 0;
                padding: 6px 15px;
                color: #333;
                border-bottom: 1px solid #dfdfdf;
                font-size: 20.04px;
                line-height: 30.06px;

                span {
                    font-size: 14px;
                    float: right;

                    a {
                        color: #e1251b;
                    }
                }
            }

            div:nth-of-type(1) {
                margin-top: 40px;
            }

            .content {
                padding-left: 390px;
                margin-bottom: 18px;
                position: relative;

                label {
                    font-size: 14px;
                    width: 96px;
                    text-align: right;
                    display: inline-block;
                }

                input {
                    width: 270px;
                    height: 38px;
                    padding-left: 8px;
                    box-sizing: border-box;
                    margin-left: 5px;
                    outline: none;
                    border: 1px solid #999;
                }

                img {
                    vertical-align: sub;
                }

                .error-msg {
                    position: absolute;
                    top: 100%;
                    left: 495px;
                    color: red;
                }
            }

            .controls {
                text-align: center;
                position: relative;

                input {
                    vertical-align: middle;
                }

                .error-msg {
                    position: absolute;
                    top: 100%;
                    left: 495px;
                    color: red;
                }
            }

            .btn {
                text-align: center;
                line-height: 36px;
                margin: 17px 0 0 55px;

                button {
                    outline: none;
                    width: 270px;
                    height: 36px;
                    background: #e1251b;
                    color: #fff !important;
                    display: inline-block;
                    font-size: 16px;
                }
            }
        }

        .copyright {
            width: 1200px;
            margin: 0 auto;
            text-align: center;
            line-height: 24px;

            ul {
                li {
                    display: inline-block;
                    border-right: 1px solid #e4e4e4;
                    padding: 0 20px;
                    margin: 15px 0;
                }
            }
        }
    }
</style>
